<template>
	<div>
		<el-col class="search">
			<el-form :inline="true" ref="searchForm" class="search" :model="searchForm" v-if="checkPermission(['sys:role:search'])">
				<el-form-item label="角色名称:">
					<el-input size="mini" v-model="searchForm.roleName" clearable></el-input>
				</el-form-item>
				<el-form-item label="角色代码:">
					<el-input size="mini" v-model="searchForm.roleCode" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="small" @click="searchFormClick()">搜索</el-button>
					<el-button type="
					 primary" size="small" @click="searchFormReset()">重置</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<el-col class="tableInfo">
			<div class="leftButton">
				<el-button v-permission="['sys:role:add']" type="primary" size="small" @click="AddClick()">新增</el-button>
			</div>
			<el-table :data="tableData" style="width: 95%" highlight-current-row border :header-cell-style="{'text-align':'center'}"
			 :cell-style="{'text-align':'center'}">
				<el-table-column prop="roleId" label="id"></el-table-column>
				<el-table-column prop="roleName" label="角色名"></el-table-column>
				<el-table-column prop="roleCode" label="角色代码"></el-table-column>
				<el-table-column prop="roleDescription" label="说明"></el-table-column>
				<el-table-column prop="creatTime" label="创建时间"></el-table-column>
				<el-table-column prop="updateTime" label="更新时间"></el-table-column>
				<el-table-column fixed="right" label="操作" v-if="checkPermission(['sys:role:update','sys:role:del'])">
					<template slot-scope="scope">
						<el-button v-permission="['sys:role:update']" @click="EditClick(scope.row)" type="text" size="small">编辑</el-button>
						<el-button v-permission="['sys:role:del']" @click="DeleteClick(scope.row)" type="text" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination v-if="paginationState" @size-change="paginationSizeChange" @current-change="paginationCurrentChange"
			 :current-page="pageInfo.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageInfo.currentSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="pageInfo.total">
			</el-pagination>
		</el-col>
		<div>
			<el-dialog :title="dialogName[dialogType]" width="25%" :visible.sync="addDialogShow" class="addRoleInfo">
				<el-form ref="ruleForm" :model="addInfoForm" :rules="rules">
					<el-form-item label="角色名称" label-width="150px" prop="roleName">
						<el-input clearable v-model="addInfoForm.roleName" size="medium"></el-input>
					</el-form-item>
					<el-form-item label="角色代码" label-width="150px" prop="roleCode">
						<el-input clearable v-model="addInfoForm.roleCode" size="medium"></el-input>
					</el-form-item>
					<el-form-item label="角色说明" label-width="150px">
						<el-input clearable v-model="addInfoForm.roleDescription" size="medium"></el-input>
					</el-form-item>
					<el-form-item label="用户角色" label-width="150px" prop="menuData">
						<el-tree :data="menuData" show-checkbox node-key="id" :props="defaultProps" ref="tree">
						</el-tree>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancelForm">取 消</el-button>
					<el-button v-if="resetButtonState" @click="resetForm()">重置</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>

</template>
<script>
	import Public from '@/views/mixin/PublicHandler.js'
	import {
		addRoleInfo,
		modifyRoleInfo,
		getRolePermissionsByRoleId,
		getRoleMenusAll,
		deleteRoleInfo,
		getRoleListByPage,
		searchRoleList
	} from '@/api/role.js'

	export default {
		mixins: [Public],
		data() {
			return {
				//搜索信息
				searchForm: {
					roleCode: '',
					roleName: ''
				},
				//新增修改窗口显示
				addDialogShow: false,
				//添加信息
				addInfoForm: "",
				//表格信息
				tableData: [],
				//弹窗名字
				dialogName: ["新增角色", "编辑角色"],
				//弹出框类型 0 新增 1 修改
				dialogType: 0,
				//分页状态
				paginationState: true
			};
		},
		computed: {
			//重置按钮状态
			resetButtonState() {
				if (this.dialogType === 1) {
					return false
				} else {
					return true
				}
			}
		},
		watch: {},
		methods: {
			searchFormReset() {
				this.searchForm = {}
				this.paginationState = true
				this.getRolesInfo()
			},
			searchFormClick() {
				searchRoleList(this.searchForm).then(response => {
					const {
						data
					} = response
					this.tableData = data
				})
				this.paginationState = false
			},
			/**
			 * 取消弹窗
			 */
			cancelForm() {
				this.addDialogShow = false
				this.addInfoForm = ''
			},
			/**
			 * 提交角色
			 */
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					const menus = this.$refs.tree.getCheckedNodes(false, true)
					const menusIds = new Array()
					menus.map((key, value) => {
						menusIds.push(key.id)
					})
					this.addInfoForm.menuIds = menusIds
					console.log(this.addInfoForm.menuIds)
					this.$refs[formName].validate((valid) => {
						if (valid) {
							if (this.dialogType === 0) {
								this.addRoleInfo()
							} else {
								this.editRoleInfo()
							}
							this.addDialogShow = false
							return true
						} else {
							return false
						}
					})
				})
			},
			/**
			 * 添加角色
			 */
			addRoleInfo() {
				addRoleInfo(this.addInfoForm).then(response => {
					this.$message({
						type: "success",
						message: "添加成功"
					})
					this.getRolesInfo()
				})
			},
			/**
			 * 编辑角色
			 */
			editRoleInfo() {
				this.$confirm('此操作将修改该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					modifyRoleInfo(this.addInfoForm).then(response => {
						this.$message({
							type: 'success',
							message: '修改成功!'
						});
						this.getRolesInfo()
					})
				}).catch(() => {
					this.$message({
						type: "info",
						message: "修改取消"
					})
				})
			},
			/**
			 * 修改条数
			 */
			paginationSizeChange() {
				this.pageInfo.currentSize = data
				this.getRolesInfo()
			},
			/**
			 * 修改页数
			 */
			paginationCurrentChange() {
				this.pageInfo.currentPage = data
				this.getRolesInfo()
			},
			/**
			 * 新增角色按钮
			 */
			AddClick() {
				this.dialogType = 0
				this.addDialogShow = true
				this.addInfoForm = {}
				this.$nextTick(() => {
					this.$refs.tree.setCheckedKeys([])
				})
			},
			/**
			 * 编辑角色按钮
			 * @param {Object} row
			 */
			EditClick(row) {
				this.dialogType = 1
				this.addDialogShow = true
				this.addInfoForm = Object.assign(row)
				getRolePermissionsByRoleId(row.roleId).then(response => {
					const {
						data
					} = response
					for (var id in data) {
						this.$refs.tree.setChecked(data[id], true, false)
					}
				})
			},
			/**
			 *删除角色按钮
			 * @param {Object} row
			 */
			DeleteClick(row) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteRoleInfo(row.roleId).then(response => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getRolesInfo()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			/**
			 * 获取菜单树
			 */
			getMenuTree() {
				getRoleMenusAll().then(response => {
					const {
						data
					} = response
					this.menuData = data
				})
			},
			/**
			 * 获取角色信息
			 */
			getRolesInfo() {
				const queryData = {
					page: this.pageInfo.currentPage,
					size: this.pageInfo.currentSize
				}
				getRoleListByPage(queryData).then(response => {
					const {
						data
					} = response
					this.tableData = data.records
					this.pageInfo.total = data.total
					this.pageInfo.currentPage = data.current
					this.pageInfo.currentSize = data.size
				})
			}
		},
		created() {
			this.getRolesInfo()
			this.getMenuTree()
			this.rules = {
				roleName: [{
					required: true,
					message: '请输入角色名',
					trigger: 'blur'
				}],
				roleCode: [{
					required: true,
					message: '请输入角色代码',
					trigger: 'blur'
				}]
			}
		}

	}
</script>
<style scoped lang="scss">
	.search {
		margin-top: 0.625rem;
		margin-left: 0.875rem;
		margin-right: 0.625rem;
		background-color: #FFFFFF;
		border-radius: 10px;
		width: 98%;

		.el-form-item {
			margin-bottom: 10px;
			margin-left: 1.25rem;
		}

		.el-button {
			margin-left: 1.25rem;
		}
	}

	.tableInfo {
		background-color: #FFFFFF;
		margin-left: 0.875rem;
		margin-right: 0.625rem;
		margin-top: 20px;
		border-radius: 14px;
		width: 98%;

		.leftButton {
			padding-left: 2.5rem !important;
			padding-top: 10px;
		}

		.el-table {
			margin-top: 0.625rem;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 20px;
			font-size: 15px;
		}

		.el-pagination {
			margin-left: 1.375rem;
			padding-top: 10px;
			padding-bottom: 20px;
		}
	}

	.addRoleInfo {
		.el-input {
			width: 13.5rem;
		}

		.el-form-item {
			padding-left: 10px;
		}
	}
</style>
